<template>
  <div>
    <query-conponent
      @InquireAbout="
        (value) => {
          this.name = value;
        }
      "
      @tabulation="
        (value) => {
          this.paging = value;
        }
      "
      @PagingTotal="
        (value) => {
          this.totalCount = value;
        }
      "
      @CallWay="
        (value) => {
          this.ruleForm = value;
        }
      "
      @Forbidden="
        (value) => {
          this.isEditTable = value;
        }
      "
      @AddTo="
        (value) => {
          this.Modify = value;
        }
      "
      @OpenPopup="
        (value) => {
          this.isDialog = value;
        }
      "
    />

    <!-- <div class="searchBar">
      清空，
      选中变化触发，
      双向绑定，
      提示信息
      <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
        <span class="el-icon-question details-icon"></span>
      </el-tooltip>
      <span> 数据源类型 ：</span>
      <el-select
        margin-lift:100px
        clearable
        @change="changevalue"
        v-model="dataPanel"
        placeholder="请选择"
      >
      循环，
      绑定 key 值，
      分组的名字，
      选项的值
        <el-option
          v-for="item in tableData"
          :key="item.id"
          :label="item.dataSourceType"
          :value="item.id"
        ></el-option>
      </el-select>
      样式，
      类型，
      尺寸，
      点击事件
      <el-button
        style="margin-left: 30px"
        type="primary"
        size="small"
        @click="inquire"
        >查询</el-button
      >
      <el-button
        style="margin-left: 30px"
        type="primary"
        size="small"
        @click="search"
        >添加</el-button
      >
    </div> -->

    <!-- 显示的数据，纵向边框， -->
    <!-- <el-table
      :data="paging.slice((pageNum - 1) * PageSize, pageNum * PageSize)"
      border
      class="PageSizepageNum"
    >
    索引，自定义索引，表头
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
      ></el-table-column>
      <el-table-column label="数据源名称">
        自定义插槽
        <template slot-scope="scope">
          样式，点击事件
          <div :class="scope.row.isClass" @click="isinfo(scope.row)">
            {{ scope.row.dataSourceName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数据源地址">
        <template slot-scope="scope">
          <div :class="scope.row.isClass" @click="isinfo(scope.row)">
            {{ scope.row.dataSourceUrl }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数据库名称">
        <template slot-scope="scope">
          <div :class="scope.row.isClass" @click="isinfo(scope.row)">
            {{ scope.row.dbName }}
          </div>
        </template>
      </el-table-column>
      对应列的字段名，表头
      <el-table-column prop="dataSourceType" label="类型"></el-table-column>
      <el-table-column prop="dataSourceDesc" label="描述">
        <template slot-scope="scope">
          <div :class="scope.row.isClass" @click="isinfo(scope.row)">
            {{ scope.row.dataSourceDesc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        width="160px"
        label="更新时间"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small"
            >编辑
          </el-button>
          直接删除
          <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>

          询问是否删除
          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="是否要删除当前数据信息?"
            confirm = "Determine"
            cancel = "Cancel"
          >
            <el-button style="margin-left:10px" type="danger" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table> -->

    <main-part
      @isEditTable="
        (value) => {
          this.isEditTable = value;
        }
      "
      @Modify="
        (value) => {
          this.Modify = value;
        }
      "
      @isDialog="
        (value) => {
          this.isDialog = value;
        }
      "
      @ruleForm="
        (value) => {
          this.ruleForm = value;
        }
      "
      @PagingQuery="
        (value) => {
          if (value) {
            this.InquirePagingQuery();
          }
        }
      "
      :name="name"
      :paging="paging"
    />

    <!-- 分页 -->
    <com-paging-query
      :params="name"
      :totalCount="totalCount"
      @ParamsPageSize="
        (value) => {
          this.name.pageSize = value;
        }
      "
      @ParamsPageNum="
        (value) => {
          (this.name.pageNum = value), this.PagingQuery(this.name);
        }
      "
    />
    <!-- 分页 -->
    <!-- 外面套一层 div 设置样式居中，上外边距20px -->
    <!-- <div style="text-align: center; margin-top: 20px">
      添加背景颜色，
      每页条数改变触发，
      当前页改变触发，
      当前页数，
      每页显示条数，
      组件布局，
      总条目数
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="name.pageNum"
        :page-size="name.PageSize"
        layout="total, prev, pager, next"
        :total="totalCount"
      >
      </el-pagination>
    </div> -->

    <!-- 编辑弹出层 -->
    <!-- <div>
      标题，
      是否显示弹出层，
      不允许modal
      和esc打开，
      关闭按钮，
      关闭按钮的回调，
      宽，
      关闭销毁
      <el-dialog
        :title="Modify"
        :visible.sync="isDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
        :before-close="handleDialogClose"
        width="70%"
        destroy-on-close
      >
        <div>
          销毁，校验规则，绑数据，双向绑定数据，样式修改，标签文本宽
          <el-form
            v-if="ShuDown"
            :rules="rules"
            ref="ruleForm"
            :model="ruleForm"
            class="demo-ruleForm"
            label-width="120px"
          >
          标签文本，样式，表单域绑定字段
            <el-form-item label="数据源名称" class="item" prop="dataSourceName">
              双向绑定，提示信息，控制组件尺寸，样式，清空
              <el-input
                v-model="ruleForm.dataSourceName"
                placeholder="请输入数据源名称"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>

            <el-form-item label="数据源地址" class="item" prop="dataSourceUrl">
              <el-input
                v-model="ruleForm.dataSourceUrl"
                placeholder="请输入数据源地址"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>

            <el-form-item label="数据库名称" class="item" prop="dbName">
              <el-input
                v-model="ruleForm.dbName"
                placeholder="请输入数据库名称"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>

            <el-form-item label="用户名" class="item" prop="dataSourceUserName">
              <el-input
                v-model="ruleForm.dataSourceUserName"
                placeholder="请输入用户名"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>

            <el-form-item label="密码" class="item" prop="dataSourcePwd">
              <el-input
                type="password"
                v-model="ruleForm.dataSourcePwd"
                placeholder="请输入密码"
                size="small"
                class="Popup_inputwidth"
                clearable
                :disabled="isEditTable"
              />
            </el-form-item>

            <el-form-item label="数据源描述" class="item">
              <el-input
                v-model="ruleForm.dataSourceDesc"
                type="textarea"
                placeholder="请输入描述"
                size="small"
                class="Popup_inputwidth"
                clearable
              />
            </el-form-item>

            <el-form-item label="数据源类型" class="item" prop="dataSourceType">
              发生改变时触发，双向绑定，提示信息，禁止修改，样式
              <el-select
                @change="changeitem"
                v-model="ruleForm.dataSourceType"
                placeholder=""
                :disabled="isEditTable"
                class="Popup_inputwidth"
              >
                <el-option
                  v-for="item in itemtableData"
                  :key="item.id"
                  :label="item.dataSourceType"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetField('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div> -->

    <PopupComponent
      :ruleForm="ruleForm"
      :isDialog="this.isDialog"
      :isEditTable="isEditTable"
      :Modify="Modify"
      :tableData="tableData"
      @ChangeState="
        (value) => {
          this.isDialog = value;
        }
      "
      @EmptyForm="
        (value) => {
          if (value) {
            this.ResetData();
          }
        }
      "
      @locationReload="
        (value) => {
          if (value) {
            this.InquirePagingQuery();
          }
        }
      "
    />
  </div>
</template>

<script>
import {
  DropDownList,
  PagingQuer,
  // IndexNew,
  // SourceUpdate,
  isLogin,
} from "@/assets/js/api";
import commentFn from "./components/conmmen";
import QueryConponent from "./components/queryconponent.vue";
import PopupComponent from "./components/PopupComponent.vue";
import MainPart from "./components/MainPart.vue";
import ComPagingQuery from "@/components/PagingQuery";
export default {
  components: {
    QueryConponent,
    PopupComponent,
    MainPart,
    ComPagingQuery,
  },
  data() {
    return {
      //总页数
      totalCount: null,
      // 校验规则
      // rules: {
      //   dataSourceName: [
      //     { required: true, message: "请输入数据源名称", trigger: "blur" },
      //     {
      //       required: true,
      //       message: "输入不能为空",
      //       pattern: "[^ \x22]+",
      //       trigger: "blur",
      //     },
      //   ],
      //   dataSourceUrl: [
      //     { required: true, message: "请输入数据源地址", trigger: "blur" },
      //     {
      //       required: true,
      //       message: "输入不能为空",
      //       pattern: "[^ \x22]+",
      //       trigger: "blur",
      //     },
      //   ],
      //   dbName: [
      //     { required: true, message: "请输入数据库名称", trigger: "blur" },
      //     {
      //       required: true,
      //       message: "输入不能为空",
      //       pattern: "[^ \x22]+",
      //       trigger: "blur",
      //     },
      //   ],
      //   dataSourceUserName: [
      //     { required: true, message: "请输入用户名", trigger: "blur" },
      //     {
      //       required: true,
      //       message: "输入不能为空",
      //       pattern: "[^ \x22]+",
      //       trigger: "blur",
      //     },
      //   ],
      //   dataSourcePwd: [
      //     { required: true, message: "请输入密码", trigger: "blur" },
      //     {
      //       required: true,
      //       message: "输入不能为空",
      //       pattern: "[^ \x22]+",
      //       trigger: "blur",
      //     },
      //   ],
      //   dataSourceType: [
      //     { required: true, message: "请选择数据源类型", trigger: "change" },
      //   ],
      // },
      // 添加和编辑
      Modify: "",
      // 数据源类型下拉框
      dataPanel: "",
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
      // 是否禁用
      isEditTable: false,
      // v-if
      dialogVisible: false,
      // 向后台传的分页数据
      name: {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: null,
      },
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      //表格数据
      tableData: [],
      // 添加里的列表
      itemtableData: [],
      // 列表数据
      paging: [],
      // 弹出层
      isDialog: false,
    };
  },
  // created() {
  //   isLogin()
  //     .then((res) => {
  //       console.log(res);
  //       if (res.code == 0) {
  //         this.souarData(); //初始化列表接口调用
  //         this.PagingQuery();
  //       }
  //     })
  //     .catch(() => {
  //       this.login();
  //     });
  // },

  async created() {
    let res = await isLogin();
    if (res.code == 0) {
      this.souarData();
      this.PagingQuery();
    } else {
      this.login();
    }
  },
  methods: {
    // locationReload(res){if (res) {this.$refs.Query.inquire()}},
    // EmptyForm(res){if (res) {this.ResetData()}},
    // 表格内显示与隐藏
    isinfo(val) {
      if (val.isClass == "isStyle") {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "";
          }
        });
      } else {
        this.paging.forEach((s) => {
          if (s.id == val.id) {
            s.isClass = "isStyle";
          }
        });
      }
    },
    // 单点登录地址
    login() {
      let url =
        "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    // 清空表单数据
    ResetData() {
      this.ruleForm = {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      };
    },
    //  序号翻页连续排序
    // indexMethod(index) {
    //   return (this.name.pageNum - 1) * this.name.pageSize + index + 1;
    // },
    // v-if关闭
    // ShuDown() {
    //   this.dialogVisible = false;
    // },
    // 校验重置
    // resetField(formName) {
    //   this.$refs[formName].resetFields();
    //   this.ResetData();
    //   this.isDialog = false;
    // },
    // 添加确定提交事件
    // submitForm(formName) {
    //   this.ruleForm.dataSourcePwd = this.ruleForm.dataSourcePwd.trim();
    //   this.ruleForm.dataSourceUserName =
    //     this.ruleForm.dataSourceUserName.trim();
    //   this.ruleForm.dataSourceName = this.ruleForm.dataSourceName.trim();
    //   this.ruleForm.dataSourceUrl = this.ruleForm.dataSourceUrl.trim();
    //   this.ruleForm.dbName = this.ruleForm.dbName.trim();
    //   this.ruleForm.dataSourceDesc = this.ruleForm.dataSourceDesc.trim();
    //   this.$refs[formName].validate(async (valid) => {
    //     if (valid) {
    //       if (this.isEditTable) {
    //         let res = await SourceUpdate(this.ruleForm);
    //         if (res.code == 0) {
    //           location.reload();
    //           this.isDialog = false;
    //         } else {
    //           this.$message({
    //             showClose: true,
    //             message: res.msg,
    //             type: "error",
    //           });
    //         }
    //       } else {
    //         //转化base64密文
    //         let Base64 = require("js-base64").Base64;
    //         this.ruleForm.dataSourcePwd = Base64.encode(
    //           this.ruleForm.dataSourcePwd
    //         );
    //         let res = await IndexNew(this.ruleForm);
    //         if (res.code == 0) {
    //           location.reload();
    //           this.isDialog = false;
    //         } else {
    //           this.$message({
    //             showClose: true,
    //             message: res.msg,
    //             type: "error",
    //           });
    //         }
    //       }
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    //初始化查询搜索
    InquirePagingQuery() {
      this.name.pageNum = 1;
      this.name.pageSize = 10;
      this.name.dataSourceType = "";
      this.PagingQuery();
    },

    // 数据源分页查询
    async PagingQuery() {
      let res = await PagingQuer(this.name);
      if (res.code == 0) {
        this.totalCount = res.data.totalCount;
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.paging = res.data.list;
        this.ReplaceId();
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 替换id
    ReplaceId() {
      for (let i = 0; i < this.paging.length; i++) {
        commentFn.data.forEach((e, s) => {
          this.paging[i].dataSourceType == commentFn.data[s].id
            ? (this.paging[i].dataSourceType = commentFn.data[s].name)
            : "";
        });
      }
    },
    // 替换类型
    // ReplaceType() {
    //   let item = this.ruleForm;
    //   commentFn.data.forEach((e, s) => {
    //     item.dataSourceType == commentFn.data[s].name
    //       ? (item.dataSourceType = commentFn.data[s].id)
    //       : "";
    //   });
    // },
    //   下拉选中事件
    // changevalue(value) {
    //   this.dataPanel = value;
    // },
    // 添加下拉选中
    // changeitem(value) {
    //   this.ruleForm.dataSourceType = value; //下拉查询选中赋值
    // },
    // 点击x关闭
    // handleDialogClose() {
    //   this.ResetData();
    //   this.isDialog = false;
    // },
    // 添加按钮事件
    // search() {
    //   this.ResetData();
    //   this.isEditTable = false;
    //   this.Modify = "添加";
    //   this.isDialog = true;
    // },
    async souarData() {
      //调用列表接口
      let res = await DropDownList();
      if (res.code == 0) {
        this.tableData = res.data;
        this.itemtableData = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 编辑按钮
    // handleEdit(row) {
    //   (this.isEditTable = true), (this.Modify = "编辑");
    //   this.isDialog = true;
    //   this.ruleForm = {
    //     id: row.id,
    //     dataSourceName: row.dataSourceName,
    //     dataSourceUrl: row.dataSourceUrl,
    //     dbName: row.dbName,
    //     dataSourceUserName: row.dataSourceUserName,
    //     dataSourceType: row.dataSourceType,
    //     dataSourcePwd: row.dataSourcePwd,
    //     dataSourceDesc: row.dataSourceDesc,
    //   };
    //   this.ReplaceType();
    // },
    handleSizeChange(val) {
      (this.name.pageSize = val)
      // console.log(`每页 ${val} 条`);
    },
    // 点击分页触发
    handleCurrentChange(val) {
      this.name.pageNum = val;
      this.PagingQuery(this.name);
    },
  },
};
</script>
<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.Popup_inputwidth {
  width: 80%;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
.isStyle {
  white-space: nowrap;
}
.el-icon-question {
  color: rgb(182, 177, 177);
}
</style>
